<!--
 * @Des:
 * @Author: yang_jl
 * @Date: 2020-04-09 10:40:52
 * @LastEditor: yang_jl
 * @LastEditTime: 2021-12-22 13:51:44
 * @Description: 选择所属上级科目
 -->
<template>
  <div :style="{ width: width }">
    <span @click="open">
      <slot name="reference" />
    </span>
    <div v-if="!reference">
      <fks-input
        ref="input"
        v-model="superiorSubject"
        readonly
        :value="''"
        :size="size"
        :placeholder="LANG.INPUT_PLACEHOLDER"
      >
        <template
          v-if="!readonly"
          slot="suffix"
        >
          <i
            class="fks-icon-unfold fks-input__icon"
            style="cursor: pointer"
            @click="open"
          />
        </template>
      </fks-input>
    </div>
    <fks-dialog
      :title="LANG.PLEASE_CHOOSE_SUPERIOR_SUBJECT"
      :visible.sync="visible"
      width="1000px"
      append-to-body
      top="8vh"
      class="dialog-8vh"
      @open="open"
      @close="close"
    >
      <div class="contain">
        <fks-query-page
          v-loading="loading"
          :data="list"
          :current-page.sync="currentPage"
          :page-sizes="[15, 20, 50, 100]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :highlight-current-row="true"
          :table-name="LANG.ALL_SUBJECTS"
          row-key="id"
          lazy
          :load="load"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          @query="getProject"
          @row-click="handleRowClick"
        >
          <template slot="singleSearch">
            <div class="single-searchBox">
              <fks-input
                v-model="searchInfo"
                class="single-searchBox-item"
                :placeholder="LANG.SEARCH_PLACEHOLDER"
                clearable
                @keyup.native.enter="search"
              >
                <fks-button
                  slot="append"
                  icon="fks-icon-search"
                  @click="search"
                />
              </fks-input>
            </div>
          </template>
          <template>
            <fks-table-column
              :label="LANG.SUPERIOR_SUBJECT"
              prop="subject"
              sortable
              min-width="120"
              align="left"
            />
            <fks-table-column
              :label="LANG.SUPERIOR_SUBJECT_CODE"
              prop="subjectCode"
              sortable
              min-width="120"
            />
          </template>
        </fks-query-page>
      </div>
      <div
        slot="footer"
        style="text-align: right;"
      >
        <fks-button
          plain
          type="primary"
          @click="close"
        >
          {{
            LANG.CANCEL
          }}
        </fks-button>
        <fks-button
          type="primary"
          @click="submit"
        >
          {{ LANG.SAVE }}
        </fks-button>
      </div>
    </fks-dialog>
  </div>
</template>

<script>
import Mix from '@/mixins/module'
import { getProjectDetail, getSubProjectDetail } from './api'
export default {
  name: 'SuperiorSubjectSelect',
  mixins: [Mix],
  props: {
    //组件的双向绑定值
    superiorSubject: {
      type: String,
      default: ''
    },
    superiorSubjectCode: {
      type: String,
      default: ''
    },
    //设置组件是否只读，只读模式下不显示右侧弹窗图标，不触发弹窗
    readonly: {
      type: Boolean,
      default: false
    },
    //设置组件的尺寸，可选择值有large，small，mini
    size: {
      type: String,
      default: ''
    },
    //设置组件的宽度，默认值为100%，可传入宽度百分比值和px值
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      //查询表格相关参数
      list: [],
      loading: true,
      currentPage: 1,
      pageSize: 15,
      total: 0,

      reference: '', // slot对应
      visible: false, //弹窗显隐控制
      searchInfo: '', //搜索信息

      //将双向绑定的prop值保存到子组件
      newSuperiorSubject: this.superiorSubject,
      newSuperiorSubjectCode: this.superiorSubjectCode
    }
  },
  mounted() {
    /**获取slot内容，判断显示内容 */
    this.reference = ''
    if (this.$slots.reference && this.$slots.reference[0]) {
      this.reference = this.$slots.reference[0].elm
    }
  },
  methods: {
    //查询表格数据
    getProject() {
      this.loading = true
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        subjectCode: this.searchInfo
      }
      getProjectDetail(params)
        .then((res) => {
          if (res.status) {
            this.list = res.data.list
            this.total = res.data.total
          } else {
            this.list = []
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    open() {
      if (this.readonly) {
        return false
      }
      this.visible = true
      this.getProject()
    },
    close() {
      this.visible = false
    },
    search() {
      this.currentPage = 1
      this.getProject()
    },
    // 保存选中项信息
    handleRowClick(row) {
      this.newSuperiorSubject = row.subject
      this.newSuperiorSubjectCode = row.subjectCode
    },
    //提交选择，触发父组件值改变，实现双向绑定
    submit() {
      this.$emit('update:superiorSubject', this.newSuperiorSubject)
      this.$emit('update:superiorSubjectCode', this.newSuperiorSubjectCode)
      this.close()
    },

    /**子节点的懒加载，根据父节点的subjectCode查询其下的子节点 */
    load(tree, treeNode, resolve) {
      this.loading = true
      // tree为点击那一行的数据
      let params = {
        subjectCode: tree.subjectCode
      }
      getSubProjectDetail(params)
        .then((res) => {
          if (res.data) {
            //传入子节点数据，加载下一级
            resolve(res.data)
          } else {
            this.$message({
              type: 'error',
              message: '本节点以下暂无子节点!'
            })
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.contain {
  height: calc(92vh - 270px);
}

.contain ::v-deep .fks-input__validateIcon {
  display: none !important;
}

.contain ::v-deep .current-row > td {
  background: rgba(0, 158, 250, .219) !important;
}
</style>

